<template>
    <div class="user-edit-div">
        <van-nav-bar title="编辑用户" left-text="返回" left-arrow @click-left="$router.back()" />
        <div>
            <div class="avatar-div">
                <van-uploader v-model="userInfo.avatar" :after-read="afterRead" :max-count="1" />
            </div>
            <van-cell-group>
                <van-field v-model="userInfo.username" label="账号" disabled />
                <van-field v-model="userInfo.name" label="真实姓名" />
                <van-field v-model="userInfo.phone" label="联系电话" type="tel" />
                <van-field v-model="userInfo.age" label="年龄" type="digit" />
            </van-cell-group>
            <van-field name="radio" label="性别">
                <template #input>
                    <van-radio-group v-model="userInfo.sex" direction="horizontal">
                        <van-radio name="1">男</van-radio>
                        <van-radio name="2">女</van-radio>
                    </van-radio-group>
                </template>
            </van-field>
            <div class="sub-button">
                <van-button round type="info" native-type="submit" @click="update">提交</van-button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "EditUserInfo",
    data() {
        return {

        }
    },
    mounted() {

    },
    methods: {
        // 更新
        async update() {
            let res = await this.$store.dispatch('updateUserInfo', {
                age: this.userInfo.age,
                sex: this.userInfo.sex,
                phone: this.userInfo.phone,
                name: this.userInfo.name
            })
            if (res.success) this.$toast.success(res.message)
            else this.$myFun.resError(res.message)
        },
        // 上传头像
        async afterRead(file) {
            let imgFile = new FormData();
            imgFile.append("multipartFile", file.file);
            let res = await this.$store.dispatch('updateUserAvatar', imgFile)
            if (res.success) this.$toast.success(res.message)
            else this.$myFun.resError(res.message)
        }
    },
    computed: {
        userInfo() {
            return this.$store.state.user.userInfo
        }
    }

}
</script>

<style scoped>
.sub-button {
    position: fixed;
    bottom: 0;
    background-color: white;
    width: 100%;
    text-align: center;
    padding: 8px 0 8px 0;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.sub-button button {
    width: 80%;
}

.avatar-div {
    text-align: center;
}
</style>